<template>
	<div>
		<el-tabs type="border-card">
			<el-tab-pane label="订单">
				<el-card class="box-card" style="height: 80px">
					<p class="fl">
						<el-date-picker
					      v-model="dates"
					      type="daterange"
					      align="right"
					      unlink-panels
					      range-separator="至"
					      start-placeholder="开始日期"
					      end-placeholder="结束日期"
					      @change="get_dataList"
					      :picker-options="pickerOptions2">
					    </el-date-picker>
					</p>
					<p class="fr">
						<el-input v-model="search_key" placeholder="可输入订单号，买家卖家信息" class="w200"></el-input>
						<el-button type="primary" @click="get_dataList">搜索</el-button>
					</p>
				</el-card>
				<el-card class="box-card mt_20">
					<el-button :type="!orderStatus ? 'primary' : ''" plain size="mini" @click="setStatus(0)">全部</el-button>
					<el-button :type="orderStatus == 1 ? 'primary' : ''" plain size="mini" @click="setStatus(1)">待确认</el-button>
					<el-button :type="orderStatus == 2 ? 'primary' : ''" plain size="mini" @click="setStatus(2)">待提货</el-button>
					<el-button :type="orderStatus == 3 ? 'primary' : ''" plain size="mini" @click="setStatus(3)">已完成</el-button>
					<el-button :type="orderStatus == 4 ? 'primary' : ''" plain size="mini" @click="setStatus(4)">已关闭</el-button>
					<el-button :type="orderStatus == 5 ? 'primary' : ''" plain size="mini" @click="setStatus(5)">待结算</el-button>
					<el-button :type="orderStatus == 6 ? 'primary' : ''" plain size="mini" @click="setStatus(6)">已结算</el-button>					
					<el-table :data="dataList.list" stripe style="width: 100%">
					    <el-table-column prop="orderDate" label="交易时间" width="150"></el-table-column>
					    <el-table-column prop="orderNo" label="订单号" width="200"></el-table-column>
					    <el-table-column prop="orderName" label="产品名称" width="150"></el-table-column>
					    <el-table-column prop="buyer" label="买家" width="100"></el-table-column>
					    <el-table-column prop="seller" label="卖家" width="100"></el-table-column>
					    <el-table-column label="订单金额" width="150">
					    	<template scope='sy'>
					    		¥ {{sy.row.money.toFixed(2)}}元
					    	</template>
						</el-table-column>
					    <el-table-column prop="orderStatus" label="状态" width="100"></el-table-column>
					    <el-table-column label="操作" width="150">
					    	<template scope='scope'>
								<el-button type="primary" plain size="mini"  @click="getOrderDetails(scope.row.orderId)">查看详情</el-button>
				    		</template>
						</el-table-column>
					</el-table>
					
					<!-- 分页组件 dataList传数据，toClick传点击事件方法 -->
					<sy-pages :dataList="dataList" :toClick="get_dataList"></sy-pages>
				</el-card>
			</el-tab-pane>
			<el-tab-pane label="需求">
				<search-condition></search-condition>
				
				<el-card class="box-card mt_20">
					<el-button :type="!orderStatus ? 'primary' : ''" plain size="mini" @click="setStatus(0)">全部</el-button>
					<el-button :type="orderStatus == 1 ? 'primary' : ''" plain size="mini" @click="setStatus(1)">供货中</el-button>
					<el-button :type="orderStatus == 2 ? 'primary' : ''" plain size="mini" @click="setStatus(2)">已完成</el-button>
					<el-button :type="orderStatus == 2 ? 'primary' : ''" plain size="mini" @click="setStatus(3)">已关闭</el-button>
					<el-table :data="dataList.list" stripe style="width: 100%">
					    <el-table-column prop="orderDate" label="交易时间" width="150"></el-table-column>
					    <el-table-column prop="orderNo" label="订单号" width="200"></el-table-column>
					    <el-table-column prop="orderName" label="产品名称" width="150"></el-table-column>
					    <el-table-column prop="buyer" label="买家" width="100"></el-table-column>
					    <el-table-column prop="seller" label="卖家" width="100"></el-table-column>
					    <el-table-column label="订单金额" width="150">
					    	<template scope='sy'>
					    		¥ {{sy.row.money.toFixed(2)}}元
					    	</template>
						</el-table-column>
					    <el-table-column prop="orderStatus" label="状态" width="100"></el-table-column>
					    <el-table-column label="操作" width="150">
					    	<template scope='scope'>
								<el-button type="primary" plain size="mini"  @click="getOrderDetails(scope.row.orderId)">查看详情</el-button>
				    		</template>
						</el-table-column>
					</el-table>
					
					<!-- 分页组件 dataList传数据，toClick传点击事件方法 -->
					<sy-pages :dataList="dataList" :toClick="get_dataList"></sy-pages>
				</el-card>

			</el-tab-pane>
		</el-tabs>

		<!-- infoWindow -->
		<el-dialog title="订单详情" :visible.sync="dialogTableVisible" fullscreen>
			<h2 class="details_title">买家信息</h2>
			<div class="orders_details">
				<dl>
					<dd>国籍</dd>
					<dt>{{detailsInfo.buyerInfo.buyerCountry}}</dt>
				</dl>
				<dl>
					<dd>姓名</dd>
					<dt>{{detailsInfo.buyerInfo.buyer}}</dt>
				</dl>
				<dl class="full">
					<dd>证件号</dd>
					<dt>{{detailsInfo.buyerInfo.buyerIDnumber}}</dt>
				</dl>
			</div>
			<h2 class="details_title">买家信息</h2>
			<div class="orders_details">
				<dl>
					<dd>国籍</dd>
					<dt>{{detailsInfo.sellerInfo.sellerCountry}}</dt>
				</dl>
				<dl>
					<dd>姓名</dd>
					<dt>{{detailsInfo.sellerInfo.seller}}</dt>
				</dl>
				<dl class="full">
					<dd>证件号</dd>
					<dt>{{detailsInfo.sellerInfo.sellerIDnumber}}</dt>
				</dl>
			</div>
			<h2 class="details_title">买家信息</h2>
			<div class="orders_details">
				<dl>
					<dd>产品名称</dd>
					<dt>{{detailsInfo.productInfo.productName}}</dt>
				</dl>
				<dl>
					<dd>产品类型</dd>
					<dt>{{detailsInfo.productInfo.productType}}</dt>
				</dl>
				<dl>
					<dd>产品编号</dd>
					<dt>{{detailsInfo.productInfo.productId}}</dt>
				</dl>
				<dl>
					<dd>计量单位</dd>
					<dt>{{detailsInfo.productInfo.productUnit}}</dt>
				</dl>
				<dl>
					<dd>单价</dd>
					<dt>{{detailsInfo.productInfo.productPrice}}</dt>
				</dl>
				<dl>
					<dd>重量</dd>
					<dt>{{detailsInfo.productInfo.productWeight}}</dt>
				</dl>
				<dl>
					<dd>金额</dd>
					<dt>{{detailsInfo.productInfo.productMoney}}</dt>
				</dl>
				<dl>
					<dd>大写</dd>
					<dt>{{detailsInfo.productInfo.productChina}}</dt>
				</dl>
			</div>
			<div class="mt_20">
				<div class="fl">制单人：张三</div>
				<div class="fr">结算人：张三</div>
			</div>
			<div class="clear"></div>
			<el-button type="primary" @click="printFunc">打印</el-button>
		</el-dialog>
	</div>
</template>
<script>
import axios from 'axios'
export default {
	data() {
		return{
			dates: "",
			search_key: "",
			orderStatus: 0,
			dataList: this.$store.state.dataList,
			dialogTableVisible: false,
			pickerOptions2: {
	          shortcuts: [{
	            text: '今天',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime());
	              picker.$emit('pick', [start, end]);
	            }
	          },{
	            text: '昨天',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24);
	              picker.$emit('pick', [start, end]);
	            }
	          },{
	            text: '最近7天',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
	              picker.$emit('pick', [start, end]);
	            }
	          }]
	        },
	        detailsInfo: {
	        	buyerInfo: {},
	        	sellerInfo: {},
	        	productInfo: {}
	        }
		}
	},
	methods: {
		printFunc(){
			window.print()
		},
		//获取数据列表
		get_dataList(pageNo, pageSize){
			let params = {
					dateStart: moment(this.dates[0]).format('YYYY-MM-DD'),
					dateEnd: moment(this.dates[1]).format('YYYY-MM-DD'),
					key: this.search_key,
					orderStatus: this.orderStatus,
					pageNo: pageNo > 0 ? pageNo : 1,
					pageSize: pageSize || this.dataList.page.pageSize || 20
				}
			
			axios.post($base + 'china/orders', params).then(json => {
				this.dataList = json.data;
			}).catch(err => {
				console.log(err);
			})
		},
		// 设置订单状态
		setStatus(type){
			this.orderStatus = type;
			this.get_dataList();
		},
		getOrderDetails(orderId){
			let params = {
					id: orderId
				}
			this.dialogTableVisible = true;
			
			axios.post($base + 'GnOrder/details', params).then(res => {
				this.detailsInfo = res.data;
				console.log(res)
			})






		}
	},
	mounted(){
		this.get_dataList();
	}

}
</script>